import {Component, ViewChildren, ViewContainerRef} from "@angular/core";
import {ICellEditorAngularComp} from '@ag-grid-community/angular';

@Component({
  selector: 'apes-cell-combogrid',
  template: `
    <div style="min-width: 500px;" (keydown)="onKeyDown($event)">
      <ng-select [items]="itemsData"
                 class="ng-table"
                 bindLabel="name"
                 bindValue="name"
                 [(ngModel)]="inputValue">

        <!-- 表头部分 -->
        <ng-template ng-header-tmp>

          <div apes-row class="ng-table-row">
            <div apes-col class="ng-table-col" [apesSpan]="4">id</div>
            <div apes-col class="ng-table-col" [apesSpan]="4">name</div>
            <div apes-col class="ng-table-col" [apesSpan]="4">age</div>
            <div apes-col class="ng-table-col" [apesSpan]="4">city</div>
            <div apes-col class="ng-table-col" [apesSpan]="8">title</div>
          </div>

        </ng-template>

        <!-- 表主体部分 -->
        <ng-template ng-option-tmp let-item="item">

          <div apes-row class="ng-table-row">
            <div apes-col class="ng-table-col" [apesSpan]="4">{{item.id}}</div>
            <div apes-col class="ng-table-col" [apesSpan]="4">{{item.name}}</div>
            <div apes-col class="ng-table-col" [apesSpan]="4">{{item.age}}</div>
            <div apes-col class="ng-table-col" [apesSpan]="4">{{item.city}}</div>
            <div apes-col class="ng-table-col" [apesSpan]="8" [title]="item.title">{{item.title}}</div>
          </div>

        </ng-template>

        <!-- 表尾部分 -->
        <ng-template ng-footer-tmp>

          <button apes-button apesType="primary">提交</button>
          <button apes-button apesType="primary">重置</button>

        </ng-template>

      </ng-select>
    </div>
  `,
  styles: []
})
export class EditorCombogridComponent implements ICellEditorAngularComp {
  itemsData: any[] = [];       // the all data can be choose
  inputValue: any;  // the selected Data

  // [apesConfig] = "apesConfig" (backFillData)="onBackFillData($event)"

  params: any;
  apesConfig: any;

  @ViewChildren('select') select;

  constructor() {
  }

  agInit(params: any): void {
    this.params = params;

    // this.api = params.api;
    // this.downFormatter = params.downFormatter;
    // this.valueFormatter = params.valueFormatter;
    console.log(params);
    this.inputValue = params.value;
    this.apesConfig = this.extend(params);

    this.itemsData = [
      {id: 1, name: 'Jack', age: 20, city: 'US', title: 'I\'m a long text, and then you can\'t see me.'},
      {id: 2, name: 'Lucy', age: 23, city: 'US', title: 'I\'m a long text, and then you can\'t see me.'},
      {id: 3, name: 'TOM', age: 18, city: 'US', title: 'I\'m a long text, and then you can\'t see me.'},
      {id: 4, name: 'Mick', age: 38, city: 'UK', title: 'I\'m a long text, and then you can\'t see me.'},
      {id: 5, name: 'Roi', age: 24, city: 'UK', title: 'I\'m a long text, and then you can\'t see me.'},
      {id: 6, name: 'NI', age: 28, city: 'UK', title: 'I\'m a long text, and then you can\'t see me.'},
      {id: 7, name: 'CH', age: 21, city: 'CH', title: 'I\'m a long text, and then you can\'t see me.'},
      {id: 8, name: 'Roe', age: 34, city: 'CN', title: 'I\'m a long text, and then you can\'t see me.'},
      {id: 9, name: 'Hi', age: 14, city: 'CN', title: 'I\'m a long text, and then you can\'t see me.'},
    ];
  }

  extend(data: any) {
    let result = {};
    for (let key in data) {
      let value = data[key];
      if (key === 'context') {
        result['ctx'] = value;
      } else {
        result[key] = value;
      }
    }
    return result;
  }

  ngAfterViewInit() {
    //this.select.focus();
  }

  isPopup(): boolean {
    return true;
  }

  onBackFillData(params: any) {
    this.params.value = params;
  }

  getValue(): any {
    let result;
    if (!this.inputValue) {
      result = '';
      this.params.value = '';
    } else {
      result = this.inputValue;
      this.params.value = this.inputValue;
    }
    return result;
  }

  // refresh(params: any): boolean {
  //     return undefined;
  // }

  onKeyDown(event): void {
    let key = event.which || event.keyCode;
    if (key === 38 || key === 40) {
      this.preventDefaultAndPropagation(event);

      if (key == 38) {
        // up
        console.log('up');
        //this.selectedIndex = this.selectedIndex === 0 ? this.vegetables.length - 1 : this.selectedIndex - 1;
      } else if (key == 40) {
        // down
        // this.selectedIndex = this.selectedIndex === this.vegetables.length - 1 ? 0 : this.selectedIndex + 1;
        console.log('down');
      }
      //this.selectFavouriteVegetableBasedOnSelectedIndex();
    }
  }

  private preventDefaultAndPropagation(event) {
    event.preventDefault();
    event.stopPropagation();
  }

  private getItemsData(){

  }
}
